<template>
	<view>
		<!-- <view class="wrapper">
			<view v-for="(val, index) in fill" :key="index" :class="{'cursor':(current == index && current<length && focus)}"
				@tap.stop="focusHandler(index)" class="item">
				{{val}}
			</view>
		</view> -->
		<view class="displayAli_cen wid100 paddingTB10px" @tap.stop="focus = true">
		<!-- 	<view v-for="(val, index) in fill" :key="index">
				<view class="cursor">{{val}}</view>
			</view> -->
			<u--input v-model="carNumber" readonly inputAlign="right" placeholder="请输入车牌号码" border="none"></u--input>
		<!-- 	<view>{{carNumber}}</view>
			<view v-if="carNumber.length == 0" class="c-000opacity45">请输入车牌号码</view> -->
		</view>

		<u-keyboard mode="car" :abc='abc' :overlay="false" :show="focus" @backspace="keyDeleteHandler" @change="keyInputHandler" @confirm="keyHideHandler" @close="keyHideHandler" @cancel="keyHideHandler"></u-keyboard>
	</view>
</template>

<script>
	export default {
		props: {
			value: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				focus: false,
				current: 0,
				length: 10,
				fill: [],
				abc:true, // 是否切换中英文
				
				carNumber:"",
			}
		},
		watch: {
			fill(val) {
				this.carNumber=val.join('')
				this.$emit('input', {val:val.join(''),length:this.length});
				this.$emit('change', val);
			},
			value:{
				handler(n,o){
					if (this.value != this.fill.join('')) {
						this.length = n.length
						this.init()
					}
				},
				immediate:true
				
			},
			focus(val) {
				this.$emit('onChangeKeyboard', val);
			},
			current(n,o){
				this.abc=n!==0?true:false
			},
		},
		beforeMount() {
			this.init()
			uni.$on('abc',res=>{
				console.log(1111);
				this.abc=res
			})
		},
		methods: {
			init() {
				this.fill = new Array(this.length).fill('')
				console.log(this.value);
				if (this.value) {
					console.log(this.value.split(''));
					this.value.split('').forEach((key, index) => {
						if (index >= this.length) {
							return;
						}
						console.log(this.fill);
						this.$set(this.fill, index, key);
					});
					console.log(this.fill);
					this.current = Math.min(this.value.length, this.length - 1);
				} else {
					this.current = 0
					this.length = 10
				}
			},
			onAddInput() {
				this.length = 8
				this.fill.push('')
				
				this.focus = true;
				this.current = 7;
			},
			focusHandler(index = 0) {
				this.focus = true;

				this.current = index;
			},
			keyDeleteHandler() {
				this.$set(this.fill, this.current, '');

				if (this.current <= 0) {
					return;
				}

				this.current -= 1;
			},
			keyInputHandler(key) {
				this.$set(this.fill, this.current, key);

				if (this.current >= this.length - 1) {
					// if (this.current == 6) {
					// 	this.onAddInput()
					// }
					return;
				}

				this.current += 1;

			},
			keyHideHandler() {
				this.focus = false;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wrapper {
		display: flex;
		justify-content: space-around;

		.item {
			position: relative;
			max-width: 100rpx;
			flex: 1;
			margin-right: 5rpx;
			height: 90rpx;
			line-height: 90rpx;
			border: 1px solid #c9c9c9;
			border-radius: 4rpx;
			text-align: center;
			font-size: 30rpx;
			font-weight: 700;

			.cursor {
				// position: absolute;
				// left: 50%;
				// top: 50%;
				// transform: translate(-50%, -50%);
				// width: 2rpx;
				// height: 50rpx;
				// background-color: #333;
				// animation: flicker 1.5s infinite;
			}
		}

		.cursor {
			border: 1px solid #166ffc;
		}

		.new-energy {
			display: flex;
			flex-direction: column;
			justify-content: center;
			max-width: 100rpx;
			flex: 1;
			height: 90rpx;
			white-space: nowrap;
			border: 1px dashed #07B561;
			border-radius: 4rpx;
			text-align: center;
			color: #07B561;
			font-size: 20rpx;
		}

		.item:last-child {
			margin-right: 0;
		}

		@keyframes flicker {
			0% {
				opacity: 0;
			}

			30% {
				opacity: 1;
			}

			100% {
				opacity: 0;
			}
		}
	}
</style>